<template>
    <div class="timeline-panel">
        <div class="tiemLine_within">
            <div class="time_ctrl">
                <div class="time_phase">
                    <div class="eleTime">
                        <el-input
                            oninput="this.value=this.value.replace(/[^\d.]/g,'');"
                            maxlength="4"
                            v-model="hour_time"
                        />
                        时
                    </div>
                    <div class="eleTime">
                        <el-input
                            oninput="this.value=this.value.replace(/[^\d.]/g,'');"
                            maxlength="4"
                            v-model="minute_time"
                        />
                        分
                    </div>
                    <div class="eleTime">
                        <el-input
                            oninput="this.value=this.value.replace(/[^\d.]/g,'');"
                            maxlength="4"
                            v-model="second_time"
                        />
                        秒
                    </div>
                    <span class="common_btn" @click="timeDetermine">确定</span>
                </div>
                <el-row>
                    <el-button type="primary">
                        <span class="zuoIcon changeIcon" @click="goBack"></span>
                    </el-button>
                    <el-button type="primary">
                        <span
                            @click="playControl"
                            class="changeIcon"
                            :class="isPlay ? 'stopIcon' : 'playIcon'"
                        ></span>
                    </el-button>
                    <el-button type="primary">
                        <span class="youIcon changeIcon" @click="goAhead"></span>
                    </el-button>
                </el-row>
            </div>

            <div class="slider-panel">
                <el-slider
                    v-model="sliderValue"
                    :max="times.length - 1"
                    :style="'width:' + 100 * (times.length - 1) + 'px'"
                    :format-tooltip="formatTooltip"
                    :marks="timeArrChangeObg(times)"
                    @change="markClick"
                ></el-slider>
            </div>
        </div>
    </div>
</template>

<script>
import { changeClockTime } from 'U/imageryLayerFun';

export default {
    props: {
        times: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            sliderValue: 0,
            isPlay: false,
            timer: null,
            hour_time: '0',
            minute_time: '0',
            second_time: '5',
            timePeriod: 5000,
        };
    },
    methods: {
        timeDetermine() {
            let secondNum =
                Number(this.hour_time) * 60 * 60 +
                Number(this.minute_time) * 60 +
                Number(this.second_time);
            if (secondNum >= 5) {
                this.timePeriod = secondNum * 1000;
                this.$message({
                    message: this.changeVal`播放的时间间隔为${Number(this.hour_time)}${Number(
                        this.minute_time
                    )}${Number(this.second_time)}`,
                    type: 'success',
                });
                // 如果是正在播放，停止之前的计时器，重新开始计时
                if (this.isPlay) {
                    clearTimeout(this.timer);
                    this.startPlay();
                }
            } else {
                this.hour_time = '0';
                this.minute_time = '0';
                this.second_time = '5';
                this.$message({
                    message: '播放时长不得小于5s',
                    type: 'warning',
                });
            }
        },
        changeVal(stringArr, hour_time, minute_time, second_time) {
            let hour = hour_time === 0 ? '' : hour_time + '小时';
            let minute = minute_time === 0 ? '' : minute_time + '分钟';
            let second = second_time === 0 ? '' : second_time + '秒';
            return stringArr[0] + hour + stringArr[1] + minute + stringArr[2] + second;
        },
        // 鼠标悬浮显示内容
        formatTooltip(value) {
            return this.times[value];
        },
        timeArrChangeObg(arr) {
            let timeObg = {};
            arr.forEach((item, index) => {
                timeObg[index] = item;
            });
            return timeObg;
        },
        // 标记点点击事件
        markClick(value) {
            this.sliderValue = value;
            this.stopPaly();
        },
        // 回退
        goBack() {
            this.sliderValue > 0 && (this.sliderValue -= 1);
            if (this.isPlay) {
                clearTimeout(this.timer);
                this.startPlay();
            }
        },
        // 前进
        goAhead() {
            this.sliderValue < this.times.length && (this.sliderValue += 1);
            if (this.isPlay) {
                clearTimeout(this.timer);
                this.startPlay();
            }
        },
        // 开始播放
        startPlay() {
            if (this.sliderValue < this.times.length) {
                this.timer = setTimeout(() => {
                    this.sliderValue += 1;
                    this.startPlay();
                }, this.timePeriod);
            } else {
                this.sliderValue = 0;
                this.startPlay();
            }
        },
        // 停止播放
        stopPaly() {
            this.isPlay = false;
            clearTimeout(this.timer);
        },
        // 播放控制
        playControl() {
            if (this.isPlay) {
                this.stopPaly();
            } else {
                this.startPlay();
                this.isPlay = true;
            }
        },
    },
    watch: {
        sliderValue(value) {
            changeClockTime(this.times[value]);
            this.$parent.$parent.currentIndex = value;
        },
        times: {
            handler(newV, oldV) {
                this.sliderValue = 0;
            },
            deep: true,
            immediate: true,
        },
    },
};
</script>

<style lang="scss">
@import './theme/css/timeline.scss';
</style>
